<template>
  <div class="loyout-error-box">
    <div class="error-content">
      <el-image
        class="error-img"
        style="width: 349px; height: 211px;"
        :src="errorObj === 404 ? img404 : img500"
      />
      <div class="error-text">
        <h1>{{ errorObj || 500 }}</h1>
        <p>
          {{
            errorObj === 404
              ? '抱歉，您访问的页面不存在'
              : '糟糕，服务器出问题了'
          }}
        </p>
        <el-button
          @click.stop="$router.go(-1)"
          type="primary"
          icon="el-icon-arrow-left"
          >点击返回</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'errorLayouts',
  props: ['error'],
  computed: {
    img404() {
      return window.location.origin + '/guoke-deepexi-utils-server-h5/404.png'
    },
    img500() {
      return window.location.origin + '/guoke-deepexi-utils-server-h5/500.png'
    },
    errorObj() {
      return this.error
        ? Number(this.error.statusCode)
          ? Number(this.error.statusCode)
          : 404
        : 500
    }
  },
  mounted() {
    // 勿删，用于定位问题
    console.log('layouts_error.vue', this.error)
  }
}
</script>
<style lang="less" scoped>
.loyout-error-box {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .error-content {
    display: flex;
    .error-img {
      margin-right: 100px;
    }
    .error-text {
      h1 {
        font-size: 80px;
        font-weight: 500;
        color: #26344c;
        line-height: 70px;
      }
      p {
        margin: 24px 0;
        font-size: 24px;
        font-weight: 400;
        color: #b3c1d0;
        line-height: 24px;
      }
    }
  }
}
</style>
